<template>
	<view class="container worker-detail-container">

		<view class="page-main">
			<view class="page-list">
				<view class="user-tab">执业资质</view>
				<view class="user-top">
					<image class="list-img" :src="pageData.headPortrait" mode="widthFix" @error="$handleImageError(pageData,'headPortrait')"></image>
					<view>
						<view class="list-name">{{pageData.name}}</view>
						<view style="margin-top: 10rpx;" v-if="pageData.oneSection">
							<text class="user-type">{{pageData.job}}</text>
							<text class="user-type">{{pageData.oneSection}}/{{pageData.twoSection}}</text>
						</view>
						<view style="display: flex; align-items: center;margin-top: 10rpx;">
							<text class="yuan-btn btn-primary"
								style="font-size: 24rpx;border-radius: 8rpx;padding: 5rpx 10rpx;">{{pageData.institutionalType}}</text>
							<text style="font-size: 28rpx;margin: 0 5rpx 0 20rpx;"
								@click="jump('/pages/index/clinic/clinicDetail?id='+pageData.storeId+'&name='+pageData.storeName)">{{pageData.storeName}}</text>
							<text class="iconfont" style="font-size: 24rpx;color: #299F91;">&#xe775;</text>
						</view>
					</view>
				</view>
				<view style="margin-top: 30rpx;">
					<view class="list-item">
						<text class="list-title">我的账号：</text>
						<text class="list-info">{{pageData.account}}</text>
					</view>
					<!-- <view class="list-item">
						<text class="list-title">我的密码：</text>
						<text class="list-info">XXXX</text>
					</view> -->
					<view class="list-item" v-if="pageData.oneSection">
						<text class="list-title">所属科室：</text>
						<text class="list-info">{{pageData.oneSection}}/{{pageData.twoSection}}</text>
					</view>
					<view class="list-item" v-if="pageData.adeptIllness">
						<text class="list-title">擅长疾病：</text>
						<text class="list-info" v-for="item in pageData.adeptIllness" :key="item.id">{{item.name}}、</text>
					</view>
					<view class="list-item" v-if="pageData.consultCost">
						<text class="list-title">我的咨询费用：</text>
						<text class="list-info c-warning" style="font-weight: bold;">{{pageData.consultCost}}/次</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import userApi from '../../common/userApi';
	import { getStorage, hideLoading, showLoading } from '../../common/util';
	const isLoading = ref(false)

	onMounted(async () => {
		getPageData()
	})

	const pageData=ref<any>({})
	const getPageData = async () => {
		showLoading()
		isLoading.value = true
		try {
			let params:any = {
				pcUserId:getStorage('userAuth').pcUserId,
			}
			const res = await userApi.findCurrentUserInfo(params)
			pageData.value=res.data 
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>


<style lang="scss">
	.worker-detail-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding-top: 30rpx;
		padding-bottom: 120rpx;

		.page-main {
			padding: 0 30rpx;
		}

		.page-list {
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
			position: relative;
		}

		.user-tab {
			position: absolute;
			right: 0;
			top: 0;
			background-color: rgba(253, 211, 60, 0.2);
			color: rgba(172, 142, 35, 1);
			font-size: 24rpx;
			padding: 10rpx 15rpx;
		}

		.user-top {
			display: flex;
			align-items: center;
		}

		.list-img {
			width: 150rpx;
			height: 150rpx;
			margin-right: 25rpx;
			flex-shrink: 0;
		}

		.list-name {
			font-weight: bold;
			font-size: 28rpx;
			color: #202020;
		}

		.list-item {
			font-size: 28rpx;
			margin-bottom: 15rpx;
		}

		.list-title {
			color: #6D6D6D;
			margin-right: 15rpx;
		}

		.list-info {
			color: #222222;
		}

		.user-type {
			font-size: 26rpx;
			margin-right: 20rpx;

		}
	}
</style>